<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">

<head>
  <meta content="origin" name="referrer">
  <title>plugin-forceAtlas2</title>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.layout.forceAtlas2.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/d3-4.13.0.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/d3-4.13.0.min.js"></script>

</head>

<body>
  <div id='mountNode'></div>
  <script>
      const { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } = d3;
     const force = {
        execute() {
          const nodes = this.nodes;
          const edges = this.edges;
          const graph = this.graph;
          const width = graph.getWidth();
          const height = graph.getHeight();
          const simulation = forceSimulation(nodes)
          .force('charge', forceManyBody().distanceMax(width * 3))
          .force('link', forceLink(G6.Util.clone(edges))
            .id(model => {
              return model.id;
            })
            .strength(1)
          )
          .force('center', forceCenter(width / 2, height / 2))
          .force('collision', forceCollide().radius(model => {
            return model.width / 2 * 1.2;
          }));
          simulation.stop();
          for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
            simulation.tick();
          }
          nodes.forEach(node => {
            delete node.vx;
            delete node.vy;
          });
        }
      };

    $.getJSON('../../test/fixtures/viralMarketing.json', data => {
      const Plugin = G6.Plugins['layout.forceAtlas2'];
      const layoutParams = {
        prevOverlapping: true,
        kr: 20,
        mode: 'normal',
        // barnesHut: false, // may be counter-productive on small networks
        ks: 0.1,
        dissuadeHubs: false,
        prune: true
      };
      graph = new G6.Graph({
        id: 'mountNode', // dom id
        fitView: 'autoZoom',
        plugins: [new Plugin(layoutParams)],
        // layout: {
        //   processer: force
        // },
        minZoom: 0,
        modes: {
          default: ['panCanvas']
        },
        height: 1000,
      });
      graph.edge({
        style() {
          return {
            endArrow: true,
            lineWidth: 2
          };
        }
      });
      graph.read(data);
    }); 
  </script>
</body>
